<style lang="less">
@import "@/styles/table-common.less";
.btn-box {
  // padding: 10px 12px 10px 0;
  height: 32px;
  display: flex;
  align-items: center;
  span {
    margin-left: 15px;
  }
}
.detail-modal {
  .refund-num {
    margin-top: 15px;
  }
  .detail-tab {
    border-top: 1px solid #e8eaec;
    border-left: 1px solid #e8eaec;
    li {
      display: flex;
      align-items: center;
      height: 55px;
      text-align: center;
      font-size: 14px;
      color: #515a6e;
      span {
        height: 100%;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        border-right: 1px solid #e8eaec;
        border-bottom: 1px solid #e8eaec;
      }
      &.t-tit {
        font-weight: bold;
        height: 40px;
      }
    }
  }
}
.verifyCode-cont {
  display: flex;
  flex-direction: column;
  padding-top: 3px;
  color: #2d8cf0;
  cursor: pointer;
  span {
    &:nth-child(1) {
      border-bottom: 1px solid #2d8cf0;
    }
    &:nth-child(2) {
      color: #333;
    }
  }
}
</style> 
<template>
  <div class="search">
    <Card>
      <Form ref="searchForm" :model="searchForm" inline :label-width="100">
        <Row v-show="openSearch" @keydown.enter.native="handleSearch">
          <FormItem label="会员卡名称">
            <Select
              v-model="searchForm.companyName"
              transfer
              placeholder="请选择"
              style="width: 200px"
            >
              <Option
                v-for="item in scParkRoleList"
                :key="item.id"
                :value="item.title"
                >{{ item.title }}</Option
              >
            </Select>
          </FormItem>
          <FormItem label="购买人姓名">
            <Input
              type="text"
              v-model="searchForm.uNickName"
              clearable
              placeholder="请输入购买人姓名"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="购买人电话">
            <Input
              type="text"
              v-model="searchForm.uMobile"
              clearable
              placeholder="请输入购买人电话"
              style="width: 200px"
            />
          </FormItem>
          <FormItem label="订单发起时间">
            <DatePicker
              :options="options"
              v-model="selectDate"
              type="daterange"
              format="yyyy-MM-dd"
              clearable
              @on-change="selectDateRange"
              placeholder="选择起始时间"
              style="width: 200px"
            ></DatePicker>
          </FormItem>
          <FormItem style="margin-left: -35px" class="br">
            <Button @click="handleSearch" type="primary" icon="ios-search"
              >搜索</Button
            >
            <Button @click="handleReset">重置</Button>
          </FormItem>
        </Row>
      </Form>

      <Table
        :loading="loading"
        border
        :columns="columns"
        :data="data"
        sortable="custom"
        ref="table"
      >
        <template slot-scope="{ row }" slot="verifyCode">
          <div
            @click="showVerifyCode(row)"
            class="verifyCode-cont"
            v-if="row.verifyCodeNum > 0"
          >
            <span>{{ row.verifyCode }}</span>
            <span
              >{{ row.orderActives | orderActiveLength }}/{{
                row.verifyCodeNum
              }}</span
            >
          </div>
        </template>
      </Table>
      <Row type="flex" justify="end" class="page">
        <Page
          :current="searchForm.pageNumber"
          :total="total"
          :page-size="searchForm.pageSize"
          @on-change="changePage"
          @on-page-size-change="changePageSize"
          :page-size-opts="[10, 20, 50]"
          size="small"
          show-total
          show-elevator
          show-sizer
        ></Page>
      </Row>
    </Card>
    <!-- <addEdit
      :data="form"
      :type="showType"
      v-model="showUser"
      @on-submit="getDataList"
    /> -->
    <Modal v-model="modal" title="详情" @on-ok="ok" @on-cancel="cancel">
      <div class="detail-modal">
        <ul class="detail-tab">
          <li class="t-tit">
            <span>会员名称</span>
            <span
              >激活人({{ orderActivesNums.downNum }}/{{
                orderActivesNums.totalNum
              }})</span
            >
            <span>激活人手机</span>
            <span>激活时间</span>
          </li>
          <li v-for="item in detailData" :key="item">
            <span>{{ detailProductName }}</span>
            <span>{{ item.name }}</span>
            <span>{{ item.mobile }}</span>
            <span>{{ item.createTime }}</span>
          </li>
        </ul>
        <div class="refund-num">未激活次数：{{ orderActivesNums.sub }}</div>
      </div>
      <div slot="footer"></div>
    </Modal>
  </div>
</template>

<script>
import { getScOrderByCondition, getScParkRoleMemberRole } from "@/api/index";

import { shortcuts } from "@/libs/shortcuts";
import { mapMutations, mapState } from "vuex";
export default {
  name: "role-order",
  components: {
    // addEdit,
  },
  computed: {
    ...mapState({
      chiproleName: (state) => state.chiproleName,
    }),
  },
  watch: {
    chiproleName(val) {
      if (val) {
        console.log("chiproleName:",val)
        this.searchForm = {
          pageNumber: 1,
          pageSize: "10",
          companyName: val,
        };
         this.getDataList();
      }
    },
  },
  data() {
    return {
      message: "",
      height: 510,
      showUser: false,
      showType: "0",
      loading: true,
      selectDate: "",
      openSearch: true,
      idenList: [], //角色状态
      options: {
        shortcuts: shortcuts,
      },
      orderTypeList: [
        { id: "0", title: "已取消" },
        { id: "1", title: "已完成" },
      ],
      searchForm: {
        pageNumber: 1,
        pageSize: "10",
        sort: "createTime",
        order: "desc",
      },
      columns: [
        {
          title: "订单编号",
          key: "orderNo",
          minWidth: 220,
          align: "center",
          fixed: "left",
        },
        {
          title: "会员卡名称",
          key: "orderDetails",
          width: 180,
          align: "center",
          render: (h, params) => {
            let nodeTxt = "";
            if (params.row.orderDetails.length > 0) {
              nodeTxt = params.row.orderDetails[0].productName;
            }
            return h("span", nodeTxt);
          },
        },
        {
          title: "购买人昵称",
          key: "unickName",
          width: 180,
          align: "center",
        },
        {
          title: "购买人电话",
          key: "umobile",
          width: 220,
          align: "center",
        },
        {
          title: "购买日期",
          key: "createTime",
          width: 220,
          align: "center",
        },
        {
          title: "会员兑换码",
          key: "verifyCode",
          width: 210,
          align: "center",
          slot: "verifyCode",
        },
        {
          title: "购买数量",
          key: "totalNum",
          width: 220,
          align: "center",
        },
        {
          title: "会员卡价格",
          key: "price",
          width: 220,
          align: "center",
          render: (h, params) => {
            let nodeTxt = "";
            if (params.row.orderDetails.length > 0) {
              nodeTxt =
                params.row.orderDetails[0].price /
                params.row.orderDetails[0].cartNum;
            }
            return h("span", nodeTxt);
          },
        },
        {
          title: "总价",
          key: "totalPrice",
          width: 220,
          align: "center",
        },
        {
          title: "支付类型",
          key: "paySubType",
          width: 100,
          align: "center",
          render: (h, params) => {
            let txt = this.publicFun.paySubType(params.row.paySubType);
            return h("span", [txt]);
          },
        },
        {
          title: "订单状态",
          key: "status",
          width: 100,
          align: "center",
          render: (h, params) => {
            let txt = this.publicFun.orderStatus(params.row.status);
            return h("span", [txt]);
          },
        },

        // {
        //   title: "操作",
        //   key: "createTime",
        //   width: 100,
        //   fixed: "right",
        //   render: (h, params) => {
        //     let enableOrDisable = "";
        //     enableOrDisable = h(
        //       "a",
        //       {
        //         on: {
        //           click: () => {
        //             this.modal = true;
        //             this.detailData = params.row;
        //           },
        //         },
        //       },
        //       "详情"
        //     );
        //     return h("div", [enableOrDisable]);
        //   },
        // },
      ],
      modal: false,
      columns1: [
        {
          title: "会员名称",
          key: "serialNo",
          align: "center",
        },
        {
          title: "激活人",
          key: "title",
          align: "center",
        },
        {
          title: "激活人手机",
          key: "nums",
          align: "center",
        },
        {
          title: "激活时间",
          key: "price",
          align: "center",
        },
      ],
      data: [],
      detailData: [],
      scParkRoleList: [],
      orderActivesNums: {},
    };
  },
  methods: {
    ...mapMutations(['setchiproleName']),
    init() {
      this.getDataList();
      this.getScParkRoleMemberRoleData();
    },
    changeSort(e) {
      this.searchForm.sort = e.key;
      this.searchForm.order = e.order;
      if (e.order == "normal") {
        this.searchForm.order = "";
      }
      this.getDataList();
    },
    getDataList() {
      // 多条件搜索用户列表
      this.loading = true;
      getScOrderByCondition({ ...this.searchForm, orderType: 7 }).then(
        (res) => {
          this.loading = false;
          console.log(res.message);
          this.setchiproleName("")
          if (res.success) {

            this.data = res.result.content;
            this.total = res.result.totalElements;
            if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
              this.searchForm.pageNumber -= 1;
              this.getDataList();
            }
          }
        }
      );
    },
    getScOrderByConditionData() {
      getScOrderByCondition(this.searchForm).then((res) => {
        if (res.success) {
          this.data = res.result.content;
          this.total = res.result.totalElements;
          if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
            this.searchForm.pageNumber -= 1;
            this.getDataList();
          }
        }
      });
    },
    getScParkRoleMemberRoleData() {
      getScParkRoleMemberRole().then((res) => {
        if (res.success) {
          this.scParkRoleList = res.result;
        }
      });
    },
    add() {
      this.showType = "2";
      this.showUser = true;
    },
    changePage(v) {
      console.log(v);
      this.searchForm.pageNumber = v;
      this.getDataList();
    },
    changePageSize(v) {
      this.searchForm.pageSize = v;
      this.getDataList();
    },
    selectDateRange(v) {
      if (v) {
        this.searchForm.startDate = v[0];
        this.searchForm.endDate = v[1];
      }
    },
    handleSearch() {
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      console.log(this.searchForm);
      // return
      this.getDataList();
    },
    handleReset() {
      this.selectDate = "";
      this.searchForm.startDate = "";
      this.searchForm.endDate = "";
      this.searchForm.companyName = "";
      this.searchForm.uNickName = "";
      this.searchForm.uMobile = "";
      this.searchForm.pageNumber = 1;
      this.searchForm.pageSize = 10;
      // 重新加载数据
      this.getDataList();
    },
    cancel() {},
    ok() {},
    showVerifyCode(val) {
      if (val.orderActives && val.orderActives.length > 0) {
        this.modal = true;
        let downNum = 0;
        if (val.orderActives || val.orderActives.length > 0) {
          downNum = val.orderActives.length;
        }
        let totalNum = val.verifyCodeNum;
        this.detailData = val.orderActives;
        this.orderActivesNums = {
          sub: totalNum - downNum,
          downNum,
          totalNum,
        };
      } else {
        this.$Message.info("暂无激活");
      }
      if (val.orderDetails.length > 0) {
        this.detailProductName = val.orderDetails[0].productName;
      }
    },
  },
  created() {},
  mounted() {
    // 计算高度
    console.log("chiproleName:",this.chiproleName)
    this.searchForm.companyName = this.chiproleName
    this.init();
  },
};
</script>